@config.main("Motif") {

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("Motif")

            <div class="main-body">

            @components.navUlComponents(Seq(("CmGm5C", "CmGm5C", x("CmGm5C")),
                ("CmGm6A", "CmGm6A", x("CmGm6A")),
                ("CmVm5C", "CmVm5C", x("CmVm5C")),
                ("CmVm6A", "CmVm6A", x("CmVm6A")),
                ("CsGm5C", "CsGm5C", x("CsGm5C")),
                ("CsGm6A", "CsGm6A", x("CsGm6A")),
                ("CsVm5C", "CsVm5C", x("CsVm5C")),
                ("CsVm6A", "CsVm6A", x("CsVm6A")),
            ), "CmGm5C")

            </div>
        </div>
    </div>

    <script>

            $(function () {

                $.post("@routes.MotifController.getMotifData()", (data) => {

                    $.each(data, (i, v) => {
                        let dir = v.dir
                        let pngs = ""
                        $.each(v.png, (i, v) => {
                            pngs += `<a href="/capdb/motif/motifInfoPage?name=${dir}&seq=${v}" target="_blank"><img src="/capdb/motif/getMotifImg?path=${dir}/${v}" style="width: 25%"/></a>`
                        })
                        $("#" + dir + "-img").html(pngs)
                    })
                })
            })




    </script>

}

@x(dir: String) = {
    <a href="@routes.MotifController.openDreme(dir)" target="_blank">
    <button type="button" class="btn my-btn" style="width: 200px">
        Detail</button>
    </a>
    <div id="@{dir}-img"></div>
}